<template>
  <div class="collection-point-travel">
    <el-dialog
      :title="'集合点统计(共' + sumTotalTravel() + '人)'"
      top="1rem"
      width="80%"
      :visible.sync="selfShow">
      <el-table
        v-loading="loading"
        element-loading-text="数据载入中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255,255,255, 0.4)"
        border
        :default-expand-all="true"
        :data="items">
        <el-table-column type="expand">
          <template slot-scope="scope">
            <div class="travel-item" style="background-color: #f4f4f4">
              <div class="item">姓名</div>
              <div class="item">性别</div>
              <div class="item">类型</div>
              <div class="item">电话</div>
              <div class="item">证件号码</div>
              <div class="item">证件类型</div>
            </div>
            <template v-for="(attach, idx) in scope.row.order_attach">
              <div class="travel-item" :key="'travel-item-' + idx">
                <div class="item">{{attach.fullname}}</div>
                <div class="item">{{travelSex[attach.travel_sex]}}</div>
                <div class="item">{{travelType[attach.travel_type]}}</div>
                <div class="item">{{attach.travel_mobile}}</div>
                <div class="item">{{attach.travel_certificate_number}}</div>
                <div class="item">{{certificateType[attach.travel_certificate_type]}}</div>
              </div>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="集合点">
          <template slot-scope="scope">
            {{scope.row.title ? scope.row.title : scope.row.address}}
          </template>
        </el-table-column>
        <el-table-column
          label="人数">
          <template slot-scope="scope">
            {{scope.row.order_attach.length}}人
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="selfShow = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    groupStageId: {
      type: Number,
      default: 0
    }
  },
  watch: {
    show (val) {
      this.selfShow = val
      if (val) {
        this.getItems()
      }
    },
    selfShow (val) {
      if (!val) {
        this.$emit('update:show', false)
      }
    }
  },
  data () {
    return {
      travelSex: {
        1: '男',
        2: '女'
      },
      travelType: {
        1: '成人',
        2: '儿童'
      },
      certificateType: {
        1: '大陆身份证',
        2: '香港证件',
        3: '澳门证件',
        4: '台湾证件',
        5: '护照'
      },
      loading: false,
      selfShow: false,
      items: []
    }
  },
  methods: {
    /**
     *  计算总人数
     */
    sumTotalTravel () {
      let num = 0
      this.items.map(item => {
        num += item.order_attach.length
      })
      return num
    },
    /**
     * @purpose 获取数据
     */
    getItems () {
      this.items = []
      this.loading = true
      this
        .$api
        .activity
        .collectionPointTravel(this.groupStageId)
        .then(r => {
          this.loading = false
          this.items = r
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style scoped lang="sass">
  .travel-item
    width: 100%
    min-height: 41px
    display: flex
    align-items: center
    justify-content: center
    border: 1px solid #f4f4f4
    border-top: none
    &:hover
      background-color: #f4f4f4
    .item
      height: 100%
      flex: 1
      display: flex
      align-items: center
      line-height: 1.2rem
      padding: .5rem .5rem .5rem 1rem
</style>
